<template>
<div class="common-body-wrapper">
  <search-header single-width="130" :searchList="searchList" @changeHeight="toRetTable" @confirmSearch="toSearch" @handleChange="handleSearchChange" :isCheckbox="true" :isNeedTree="true" :paramName="paramName" @setSelectedNode="setSelectedNode"></search-header>

  <div class="common-table-tree-wrapper">
    <div class="common-table-wrapper">
      <multi-fun-table :sortColumn='notFormatColumn' :orderType='sortType' :fixed-cols="fixedCols" :is-reset-table="isResetTable" :theads-info="theadsInfo" :tbodys-info="tbodysInfo" @handleMultiCheck="handleMultiCheck" @handleSortColumn="handleSortColumn" @searchFn="getList" @getNextPage="getNextPage">
        <!--按钮-->
        <div class="operate-btn-group" slot="operateBtnGroup">
          <a class="ake_btn ake_btn_text" v-if="isPermmited('REPORT:TMP_CHARGE:EXPORT')" @click.prevent="exportData()">导出</a>
          <a class="ake_btn ake_btn_text" v-if="isPermmited('REPORT:TMP_CHARGE:REBUILD')" @click.prevent="reBuild()">重新生成</a>
        </div>

        <!--普通列-->
        <template slot="tdCell" slot-scope="props">

          <el-table-column v-if="props.isMultiHeader" :label="props.label" align="center">
            <template v-for="(item, index) in props.children">
              <el-table-column v-if="item.checked" :key="index" :label="item.text" min-width="30" :prop="item.prop">
                <template slot-scope="scope">
                  <span v-if="'allBillTimes' == item.prop">
                    {{scope.row['allRealValue']}}
                    <br>{{'('+scope.row[item.prop]+')'}}</br>
                  </span>
                  <span v-else-if="'onlineBillTimes' == item.prop">
                    {{scope.row['onlineRealValue']}}
                    <br>{{scope.row[item.prop]}}</br>
                  </span>
                  <span v-else-if="'offlineBillTimes' == item.prop">
                    {{scope.row['offlineRealValue']}}
                    <br>{{scope.row[item.prop]}}</br>
                  </span>
                  <span v-else-if="'allPayOriginTimes' == item.prop">
                    {{scope.row['allPayOriginValue']}}
                    <br>{{scope.row[item.prop]}}</br>
                  </span>
                  <span v-else-if="'unknownPayOriginTimes' == item.prop">
                    {{scope.row['unknownPayOriginValue']}}
                    <br>{{scope.row[item.prop]}}</br>
                  </span>
                  <span v-else-if="'gatePayOriginTimes' == item.prop">
                    {{scope.row['gatePayOriginValue']}}
                    <br>{{scope.row[item.prop]}}</br>
                  </span>
                  <span v-else-if="'centerPayOriginTimes' == item.prop">
                    {{scope.row['centerPayOriginValue']}}
                    <br>{{scope.row[item.prop]}}</br>
                  </span>
                  <span v-else-if="'selfPayOriginTimes' == item.prop">
                    {{scope.row['selfPayOriginValue']}}
                    <br>{{scope.row[item.prop]}}</br>
                  </span>
                  <span v-else-if="'onlinePayOriginTimes' == item.prop">
                    {{scope.row['onlinePayOriginValue']}}
                    <br>{{scope.row[item.prop]}}</br>
                  </span>
                  <span v-else-if="'allCouponValue' == item.prop">
                    {{scope.row[item.prop]}}
                    <br>{{scope.row['allCouponTimes']}}</br>
                  </span>
                  <span v-else-if="'unknownCouponValue' == item.prop">
                    {{scope.row[item.prop]}}
                    <br>{{scope.row['unknownCouponTimes']}}</br>
                  </span>
                  <span v-else-if="'autoCouponValue' == item.prop">
                    {{scope.row[item.prop]}}
                    <br>{{scope.row['autoCouponTimes']}}</br>
                  </span>
                  <span v-else-if="'localCouponValue' == item.prop">
                    {{scope.row[item.prop]}}
                    <br>{{scope.row['localCouponTimes']}}</br>
                  </span>
                  <span v-else-if="'traderCouponValue' == item.prop">
                    {{scope.row[item.prop]}}
                    <br>{{scope.row['traderCouponTimes']}}</br>
                  </span>
                  <span v-else-if="'onlineParkCouponValue' == item.prop">
                    {{scope.row[item.prop]}}
                    <br>{{scope.row['onlineParkCouponTimes']}}</br>
                  </span>
                  <span v-else-if="'onlineCouponValue' == item.prop">
                    {{scope.row[item.prop]}}
                    <br>{{scope.row['onlineCouponTimes']}}</br>
                  </span>
                  <span v-else>{{ item.prop }}-{{ scope.row[item.prop]}}</span>
                </template>
              </el-table-column>
            </template>
          </el-table-column>

          <el-table-column v-else :fixed="props.fixed" :label="props.label" :min-width="props.minWidth" :width="props.width" :prop="props.prop" :sortable="props.sortable">
            <template slot-scope="scope">
              <span v-if="'reno' == props.prop">{{ scope.$index+1 }}</span>
              <span v-else-if="'payParkValue' == props.prop && searchParams.timeDim=='DATE'">
                <a class="imgLink" @click="payParkValueModal_open(scope.$index)">{{scope.row[props.prop] | formatMoney}}</a>
              </span>
              <span v-else-if="'totalHandingCharge' == props.prop">
                {{ scope.row[props.prop] |formatMoney}}
              </span>
              <span v-else-if="'shouldValue' == props.prop">
                {{ scope.row[props.prop] |formatMoney}}
              </span>
              <span v-else-if="'reliefScoreValue' == props.prop">
                {{scope.row[props.prop]}}
                <br>{{scope.row['scoreRelief']}}</br>
              </span>
              <!-- <span v-else-if="'accountTotalValue' == props.prop && scope.row[props.prop]!=0">
                  <a class="imgLink" @click.prevent="accountShowModal(scope.row)">{{ scope.row[props.prop] |formatMoney}}</a>
                </span> -->
              <span v-else-if="'accountTotalValue' == props.prop && scope.row[props.prop]==0">
                {{ scope.row[props.prop] |formatMoney}}
              </span>
              <span v-else>{{ scope.row[props.prop] }}</span>
            </template>
          </el-table-column>
        </template>

        <!--操作列内的按钮-->
        <template slot="operateCell" slot-scope="props">
          <el-table-column :fixed="props.fixed" :label="props.label" min-width="60">
            <template slot-scope="scope">
              <el-button title="详情" size="small" type="primary" icon="icon-info" class="ake-icon-font" @click="tmpdetail_open(scope.row)" plain></el-button>
            </template>
          </el-table-column>
        </template>
      </multi-fun-table>

      <!---->
      <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>
    </div>
  </div>

  <!--到账商户详情-->
  <basic-modal ref="accountModal" width="580" customeClass="surpport-park-modal" static="true">
    <h3 slot="title">到账商户详情</h3>
    <div class="modal-body" slot="modal-body">
      <multi-fun-table hasCheckboxCol="false" tableBoxId="accountTable" isNeedPrint="false" isSetTable="false" sortColumn='' orderType='' fixed-cols="0" :theads-info="accountVo.theadsInfo" :tbodys-info="accountList">
        <!--普通列-->
        <template slot="tdCell" slot-scope="props">
          <el-table-column :fixed="props.fixed" :label="props.label" :min-width="props.minWidth" :width="props.width" :prop="props.prop" :sortable="props.sortable">
            <template slot-scope="scope">
              <span>{{ scope.row[props.prop] }}</span>
            </template>
          </el-table-column>
        </template>
      </multi-fun-table>
    </div>
    <div class="modal-footer" slot="modal-footer">
      <button class="ake_btn ake_btn_text modal-close" @click="closed('accountModal')">关闭</button>
    </div>
  </basic-modal>

  <!-- 详情 modal      -->
  <basic-modal ref="payParkValueModal" static="true" width="900">
    <h3 slot="title">财务审核</h3>
    <div class="ModalBody" slot='modal-body'>
      <multi-fun-table hasCheckboxCol="false" isNeedPrint="false" isSetTable="false" sortColumn='' orderType='' fixed-cols="0" :theads-info="payParkValueModalData.theadsInfo" :tbodys-info="payParkValueModalData.tbodysInfo">
        <!--按钮-->

        <!--普通列-->
        <template slot="tdCell" slot-scope="props">
          <el-table-column v-if="props.isMultiHeader" :label="props.label" align="center">
            <template v-for="(item, index) in props.children">
              <el-table-column v-if="item.checked" :key="index" :label="item.text" min-width="60" :prop="item.prop" :sortable="item.sortable">
                <template slot-scope="scope">
                  <span v-if="'allYdtRealValue' == item.prop">{{ scope.row.directYdtRealValue+scope.row.noDirectYdtRealValue|formatMoney }}</span>
                  <span v-if="'allYdtConpon' == item.prop">{{ scope.row.directYdtConpon+scope.row.noDirectYdtConpon|formatMoney }}</span>
                  <span v-else> {{ scope.row[item.prop] |formatMoney }}</span>
                </template>
              </el-table-column>
            </template>
          </el-table-column>

          <el-table-column v-else :fixed="props.fixed" :label="props.label" :min-width="props.minWidth" :width="props.width" :prop="props.prop" :sortable="props.sortable">
            <template slot-scope="scope">
              <span v-if="'reno' == props.prop">{{ scope.$index+1 }}</span>
              <span v-else>{{ scope.row[props.prop] |formatMoney}}</span>
            </template>
          </el-table-column>
        </template>
      </multi-fun-table>
    </div>
    <div class="modal-footer" slot="modal-footer">
      <button class="ake_btn ake_btn_text modal-close" @click="closed('payParkValueModal')">确定</button>
    </div>
  </basic-modal>

  <!-- 按钮详情 modal -->
  <basic-modal ref="tmpdetailModal" static="true" width="900">
    <h3 slot="title">详情列表</h3>
    <div class="ModalBody tmpdetailCSS" slot='modal-body'>
      <multi-fun-table hasCheckboxCol="false" isNeedPrint="false" isSetTable="false" sortColumn='' orderType='' fixed-cols="0" :theads-info="tmpdetailModalData.theadsInfo" :maxHeight="380" :tbodys-info="tmpdetailModalData.tbodysInfo" :tHeightModal="tmpdetailModalData.tHeightModal">
        <!--按钮-->

        <!--普通列-->
        <template slot="tdCell" slot-scope="props">

          <el-table-column v-if="props.isMultiHeader" :label="props.label" align="center">
            <template v-for="(item, index) in props.children">
              <el-table-column v-if="item.checked" :key="index" :label="item.text" min-width="82" :prop="item.prop" :sortable="item.sortable">
                <template slot-scope="scope">
                  <span v-if="'parkCouponValue' == props.prop || 'ydtCouponValue' == props.prop">
                    {{ scope.row[item.prop] |formatMoney }}
                  </span>

                </template>
              </el-table-column>
            </template>

          </el-table-column>

          <el-table-column v-else :fixed="props.fixed" :label="props.label" :min-width="props.minWidth" :width="props.width" :prop="props.prop" :sortable="props.sortable">
            <template slot-scope="scope">
              <span v-if="'reno' == props.prop">{{ scope.$index+1 }}</span>
              <span v-else-if="'checkInTime' == props.prop || 'payTime' == props.prop">
                {{ scope.row[props.prop] | mileSecondToDate }}
              </span>
              <span v-else-if="'realValue' == props.prop || 'parkReliefValue' == props.prop">
                {{ scope.row[props.prop] | formatMoney }}
              </span>
              <span v-else>{{ scope.row[props.prop] }}</span>
            </template>
          </el-table-column>
        </template>
      </multi-fun-table>

      <!-- 弹窗modal暂时不支持分页  -->
      <!-- <table-pagination :parentLength="tmpdetailModalData.parentLength" :size="tmpdetailModalData.total" :cur-page="tmpdetailModalData.pageNumber" @backData="getReportDetailPagination"></table-pagination> -->

      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="tmpdetailModalData.pageNumber" :page-sizes="[10, 20, 50, 100]" :page-size="tmpdetailModalData.pageSize" layout="total, sizes, prev, pager, next" :total="tmpdetailModalData.total">
        </el-pagination>
      </div>
    </div>
    <div class="modal-footer" slot="modal-footer">
      <button class="ake_btn ake_btn_text modal-close" @click="closed('tmpdetailModal')">关 闭</button>
    </div>
  </basic-modal>

  <ReBuildBtn ref="myReBuildBtn" :reqUrl="reqUrl" :timeDimensionList="timeDimensionList"></ReBuildBtn>
</div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";

// 引进vue的js
import R_tmp_charge from "./js/R_tmp_charge.js";
import ReBuildBtn from "@components/reBuildBtn/index.vue";

export default {
  name: 'tmpCharge',
  mixins: [common, stardardList, invokeModal, R_tmp_charge],
  components: {
    ReBuildBtn: ReBuildBtn
  },
  data() {
    var today = [new Date(moment().subtract('days', 1).format("YYYY-MM-DD 00:00:00")), new Date(moment().subtract('days', 1).format("YYYY-MM-DD 23:59:59"))];
    return {
      reqUrl: '/report/tmp_charge/reStatReport.do',
      timeDimensionList: [{
          name: "日报",
          value: "date"
        },
        {
          name: "月报",
          value: "month"
        },
      ],
      total: 0,
      fixedCols: 2,
      paramName: "query_parkId",
      searchList: [{
          index: 0,
          isShow: false,
          type: "select",
          name: "timeDim",
          text: "时间维度",
          value: "DATE",
          isHandleChange: true,
          options: [{
              name: "日报",
              value: "DATE"
            },
            {
              name: "月报",
              value: "MONTH"
            },
            {
              name: "年报",
              value: "YEAR"
            }
          ]
        },
        {
          index: 1,
          isShow: false,
          type: "datePicker",
          pickerType: "daterange",
          format: "yyyy-MM-dd",
          name: "query_chargeDate",
          propName: "query_chargeDateStart,query_chargeDateEnd",
          text: "时间区间",
          value: today,
          style: {
            width: "360px"
          }
        },
      ],
      payParkValueModalData: {
        theadsInfo: [
          // { index: 0, isShow: false, prop: "reno", text: "序号", width: 68 },
          {
            index: 1,
            isShow: false,
            prop: "",
            text: "一点停实收金额",
            isMultiHeader: true,
            children: [{
                index: 0,
                isShow: false,
                prop: "allYdtRealValue",
                text: "总",
              },
              {
                index: 1,
                isShow: false,
                prop: "noDirectYdtRealValue",
                text: "到一点停账户",
              },
              {
                index: 2,
                isShow: false,
                prop: "directYdtRealValue",
                text: "到停车场账户",
              }
            ]
          },
          {
            index: 2,
            isShow: false,
            prop: "",
            text: "一点停优惠金额",
            isMultiHeader: true,
            children: [{
                index: 0,
                isShow: false,
                prop: "allYdtConpon",
                text: "总",
              },
              {
                index: 1,
                isShow: false,
                prop: "noDirectYdtConpon",
                text: "到一点停账户",
              },
              {
                index: 2,
                isShow: false,
                prop: "directYdtConpon",
                text: "到停车场账户",
              }
            ]
          },

          {
            index: 3,
            isShow: false,
            prop: "templateRate",
            text: "临停费率",
            minWidth: 60,
          },
          {
            index: 4,
            isShow: false,
            prop: "templateValue",
            text: "临停手续费",
            minWidth: 60,
          },
          {
            index: 5,
            isShow: false,
            prop: "templatePayDailyTimes",
            text: "收取费用的交易笔数",
            minWidth: 60,
          },
          {
            index: 6,
            isShow: false,
            prop: "templatePayDailyValue",
            text: "收取费用的交易总额",
            minWidth: 60,
          },
          {
            index: 7,
            isShow: false,
            prop: "templatePayRatio",
            text: "交易笔数抽取比例",
            minWidth: 60,
          },
          {
            index: 8,
            isShow: false,
            prop: "templatePayYdtValue",
            text: "交易笔数抽取总额",
            minWidth: 60,
          },
          {
            index: 9,
            isShow: false,
            prop: "totalHandingCharge",
            text: "总手续费",
            minWidth: 60,
          },
          {
            index: 10,
            isShow: false,
            prop: "totalPayParkValue",
            text: "一点停交易金额",
            minWidth: 60,
          }
        ],
        tbodysInfo: []
      },
      tmpdetailModalData: {
        fixedCols: 0,
        tHeightModal: 400,
        list_data: {},
        pageNumber: 1,
        pageSize: 10,
        total: 0,
        theadsInfo: [{
            index: 0,
            isShow: false,
            prop: "reno",
            text: "序号",
            initHidden: true
          },
          {
            index: 1,
            isShow: false,
            prop: "parkName",
            text: "停车场",
            minWidth: 150,
          },
          {
            index: 2,
            isShow: false,
            prop: "carCode",
            text: "车牌号",
            minWidth: 100,
          },
          {
            index: 3,
            isShow: false,
            prop: "cardCode",
            text: "卡票号",
            minWidth: 100,
          },
          {
            index: 4,
            isShow: false,
            prop: "parkVipTypeStr",
            text: "vip类型",
            minWidth: 80,
          },
          {
            index: 5,
            isShow: false,
            prop: "carTypeStr",
            text: "车辆计费类型",
            minWidth: 80,
          },
          {
            index: 6,
            isShow: false,
            prop: "payTime",
            text: "支付时间",
            minWidth: 130,
          },
          {
            index: 7,
            isShow: false,
            prop: "checkInTime",
            text: "进场时间",
            minWidth: 130,
          },
          {
            index: 8,
            isShow: false,
            prop: "realValue",
            text: "实付金额",
            minWidth: 80,
          },
          {
            index: 9,
            isShow: false,
            prop: "parkReliefScore",
            text: "抵扣积分数",
            minWidth: 80,
          },
          {
            index: 10,
            isShow: false,
            prop: "parkReliefValue",
            text: "抵扣金额",
            minWidth: 80,
          },
          {
            index: 11,
            isShow: false,
            prop: "",
            text: "停车场优惠信息",
            minWidth: 150,
            isMultiHeader: true,
            children: [{
                index: 0,
                isShow: false,
                prop: "parkCouponType",
                text: "优惠类型",
              },
              {
                index: 1,
                isShow: false,
                prop: "parkCouponName",
                text: "优惠名称",
              },
              {
                index: 2,
                isShow: false,
                prop: "parkCouponValue",
                text: "优惠金额",
              }
            ]
          },
          {
            index: 12,
            isShow: false,
            prop: "",
            text: "一点停优惠信息",
            minWidth: 150,
            isMultiHeader: true,
            children: [{
                index: 0,
                isShow: false,
                prop: "ydtCouponType",
                text: "优惠类型",
              },
              {
                index: 1,
                isShow: false,
                prop: "ydtCouponName",
                text: "优惠名称",
              },
              {
                index: 2,
                isShow: false,
                prop: "ydtCouponValue",
                text: "优惠金额",
              }
            ]
          },
          // { index: 13, isShow: false, prop: 'enterAddress', text: '进场通道', minWidth: 140 },
          {
            index: 13,
            isShow: false,
            prop: "payOriginRemark",
            text: "支付来源备注",
            minWidth: 80,
          },
          {
            index: 14,
            isShow: false,
            prop: "payModeRemark",
            text: "支付方式备注",
            minWidth: 80,
          },
          {
            index: 15,
            isShow: false,
            prop: "topBillCode",
            text: "停车场流水号",
            minWidth: 120,
          },
          {
            index: 16,
            isShow: false,
            prop: "billCode",
            text: "支付流水号",
            minWidth: 120,
          },
          {
            index: 17,
            isShow: false,
            prop: "thirdBillCode",
            text: "第三方支付流水号",
            minWidth: 80,
          },
          {
            index: 18,
            isShow: false,
            prop: "tollCollectorName",
            text: "收费员",
            minWidth: 80,
          },
          {
            index: 19,
            isShow: false,
            prop: "abnormalOpenGate",
            text: "是否异常放行",
            minWidth: 80,
          }
        ],
        tbodysInfo: []
      },
      theadsInfo: [
        // { index: 0, isShow: false, prop: "reno", text: "序号", width: 68 },
        {
          index: 1,
          isShow: false,
          prop: "statDate",
          text: "日期",
          minWidth: 90
        },
        {
          index: 2,
          isShow: false,
          prop: "parkName",
          text: "停车场",
          minWidth: 96
        },
        {
          index: 3,
          isShow: false,
          prop: "accountTotalValue",
          text: "到停车场账户",
          minWidth: 60
        },
        {
          index: 4,
          isShow: false,
          prop: "billTimes",
          text: "交易金额与次数",
          minWidth: 130,
          isMultiHeader: true,
          children: [{
              index: 0,
              isShow: false,
              prop: "allBillTimes",
              text: "总",
            },
            {
              index: 1,
              isShow: false,
              prop: "onlineBillTimes",
              text: "线上",
            },
            {
              index: 2,
              isShow: false,
              prop: "offlineBillTimes",
              text: "线下",
            }
          ]
        },
        {
          index: 5,
          isShow: false,
          prop: "payOriginTimes",
          text: "缴费来源",
          minWidth: 150,
          isMultiHeader: true,
          children: [{
              index: 0,
              isShow: false,
              prop: "allPayOriginTimes",
              text: "总",
            },
            {
              index: 1,
              isShow: false,
              prop: "unknownPayOriginTimes",
              text: "未知",
            },
            {
              index: 2,
              isShow: false,
              prop: "gatePayOriginTimes",
              text: "岗亭",
            },
            {
              index: 3,
              isShow: false,
              prop: "centerPayOriginTimes",
              text: "中央",
            },
            {
              index: 4,
              isShow: false,
              prop: "selfPayOriginTimes",
              text: "自助缴费机",
            },
            {
              index: 5,
              isShow: false,
              prop: "onlinePayOriginTimes",
              text: "线上",
            }
          ]
        },
        {
          index: 6,
          isShow: false,
          prop: "shouldValue",
          text: "应收款",
        },
        {
          index: 7,
          isShow: false,
          prop: "couponValue",
          text: "优惠额与数量",
          minWidth: 110,
          isMultiHeader: true,
          children: [{
              index: 0,
              isShow: false,
              prop: "allCouponValue",
              text: "总",
            },
            {
              index: 1,
              isShow: false,
              prop: "unknownCouponValue",
              text: "未知",
            },
            {
              index: 2,
              isShow: false,
              prop: "autoCouponValue",
              text: "自动优惠",
            },
            {
              index: 3,
              isShow: false,
              prop: "localCouponValue",
              text: "本地优惠",
            },
            {
              index: 4,
              isShow: false,
              prop: "traderCouponValue",
              text: "商家优惠",
            },
            {
              index: 5,
              isShow: false,
              prop: "onlineParkCouponValue",
              text: "线上停车场优惠",
            },
            {
              index: 6,
              isShow: false,
              prop: "onlineCouponValue",
              text: "平台优惠",
            }
          ]
        },
        {
          index: 8,
          isShow: false,
          prop: "reliefScoreValue",
          text: "车场积分",
        },
        // {
        //   index: 9,
        //   isShow: false,
        //   prop: "totalHandingCharge",
        //   text: "总手续费",
        // },
        // {
        //   index: 10,
        //   isShow: false,
        //   prop: "payParkValue",
        //   text: "一点停结算金额",
        // }
      ],
      tbodysInfo: []
    };
  },
  filters: {
    formatBillStatus: function (billStatus) {
      return billStatus == 2 ? "已支付" : "未支付";
    }
  }
};
</script>

<style lang="less">
  .block{
    .el-pagination{
      display: flex;
      justify-content: center;
    }
  }
</style>

<style lang="less" scoped>
.user-row-modal {
  .modal-body {
    min-height: 400px;
  }

  .first-item {
    width: 240px;
  }
}

.role-select {
  width: 240px;
}

#parkNameListModal {
  min-height: 400px;
}
</style>
